<template>
  <div class="news">
    <div class="index-title">
      <h2>最新动态</h2>
      <p>Latest News</p>
    </div>
    <swiper :options="swiperOption" class="swiper-container-news">
      <swiper-slide class="swiper-slide" v-for="(item, index) in newsArr" :key="index">
        <div class="swiper-box">
          <router-link :to="{path: '/news-details', query:{id: item.id, type: type}}">
            <img class="swiper-slide-img" :src="item.img_url" :alt="item.title" />
            <p class="swiper-slide-desc">{{item.title}}</p>
          </router-link>
        </div>
      </swiper-slide>
    </swiper>
    <div class="more">
      <router-link :to="{path: '/news', query:{type: type}}">查看更多</router-link>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      newsArr: {
        type: Array,
        required: true,
        default: function() {
          return []
        }
      },
      type: {
        required: true,
        default: 0
      }
    },
    data() {
      return {
        swiperOption: {
          slidesPerView: 'auto',
          freeModeMomentum: false,
          spaceBetween: 10,
          freeMode: true,
          observer: true, //修改swiper自己或子元素时，自动初始化swiper
          observeParents: true, //修改swiper的父元素时，自动初始化swiper
        }
      };
    },
  }
</script>
<style lang="less" scoped>
  .news {
    padding: 0.18rem 0.25rem 0.54rem;

    .swiper-container-news {
      max-height: 4.2rem;

      .swiper-slide {
        width: 2.53rem;
      }

      .swiper-slide-img {
        display: block;
        width: 2.53rem;
        height: 3.23rem;
      }

      .swiper-slide-desc {
        margin-top: 0.14rem;
        font-size: 0.25rem;
        color: #302e2f;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 0.43rem;
      }
    }

    .index-title {
      text-align: center;
      margin-bottom: 0.3rem;

      h2 {
        line-height: 1.2;
      }

      p {
        font-size: 0.25rem;
        color: #616161;
      }
    }

    .more a {
      display: block;
      width: 1.63rem;
      height: 0.48rem;
      line-height: 0.48rem;
      text-align: center;
      margin: 0.36rem auto 0 auto;
      border: 1px solid #3f3f3f;
      color: #3f3f3f;
      font-size: 0.25rem;
    }
  }
</style>
